<template>
  <div class="topayOrder">
      <div class="topayOrder_nav">
          <van-nav-bar title="订单确认" left-text="返回" @click-left="topayOrderOnClickLeft"/>
      </div>
      <div class="topayOrder_content">
        <div class="topayOrder_address">
            <div class="topayOrder_address_left">
                <van-icon style="margin:3px 10px 0 5px;" name="location-o" />
                <span>收货地址</span>
            </div>
            <div class="topayOrder_address_right">
                <div>
                    <span style="font-size:20px">{{customerById.username}}</span>&nbsp;

                    <span>{{addressId[0]['telephone']}}</span>
                </div>
                <div>
                    <span style="font-size:15px">{{addressId[0]['province']}}{{addressId[0]['city']}}{{addressId[0]['area']}}</span>
                    <span>
                        {{addressId[0]['address']}}
                    </span>
                </div>
            </div>
        </div>
        <div class="topayOrder_order">
            <div class="topayOrder_order_left">
                <van-icon style="margin:5px 10px 0 5px" name="balance-list-o" />
                <span>支付金额</span>
            </div>
            <div class="topayOrder_order_right">
                <div>
                    <span>共计￥{{$route.query.price}}</span>
                </div>
            </div>
      </div>
      <div class="topayOrder_time">
            <div class="topayOrder_time_left">
                <van-icon style="margin:5px 10px 0 5px" name="clock-o" />
                <span>下单时间</span>
            </div>
            <div class="topayOrder_time_right">
                <div>
                    <span style="font-size:15px">北京时间</span>
                </div>
            </div>
      </div>
      <div class="topayOrder_pay">
            <div class="topayOrder_pay_left">
                <van-icon style="margin:5px 10px 0 5px" name="gold-coin-o" />
                <span>支付方式</span>
            </div>
            <div class="topayOrder_pay_right">
                <div>
                    <span>账户余额：￥{{customerById.money}}</span>
                </div>
            </div>
      </div>
      <div class="topayOrder_button">
          <van-button type="primary" block round color="#1E5EAE" @click="confirmOrderW">确认订单</van-button>
      </div>
  </div>
      
    
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { Toast } from 'vant';
export default {
    data(){
        return{
            
        }
    },
    created(){
        this.findCustomer(localStorage.getItem('id'))
        this.loadAddressId(localStorage.getItem('id'))
    },
    computed:{
        ...mapState('money',['customerById']),
        ...mapState('address',['addressId'])
    },
    methods:{
        ...mapActions('money',['findCustomer']),
        ...mapActions('order',['saveOrder']),
        ...mapActions('address',['loadAddressId']),
        topayOrderOnClickLeft(){
            this.$router.push('details')
        },
        confirmOrderW(){
            let customerId=localStorage.getItem('id')
            let obj={
                customerId:customerId,
                addressId:this.addressId[0]['id'],
            }
            if(this.$route.query.price==0){
                Toast('未选择，请选择心仪的宝贝吧！');
                this.$router.push({path:'details'})
                
            }else if(this.$route.query.price>this.customerById.money){
                Toast('余额不足，请充值！');
                this.$router.push({path:'details'})
            }else{
                this.$router.push({path:'details'})
                Toast('下单成功！');
            }
        }
    }
}
</script>
<style scope>
.topayOrder{
    height:calc(100vh - 10px);
    overflow: auto;
}
.topayOrder_content{
    height:100%;
    padding:15px;
}
    .topayOrder_address{
        height:100px;
        border-bottom: 1px solid #eee;
    }
    .topayOrder_address_left{
        line-height: 80px;
        float:left;
        width:35%;
    }
    .topayOrder_address_right{
        width:65%;
        float: left;
        line-height:40px;
    }
    .topayOrder_order{
        height:100px;
        border-bottom: 1px solid #eee;
    }
    .topayOrder_order_left{
        line-height: 80px;
        float:left;
        width:35%;
    }
    .topayOrder_order_right{
        width:65%;
        float: left;
        line-height:80px;
    }
    .topayOrder_time{
        height:100px;
        border-bottom: 1px solid #eee;
    }
    .topayOrder_time_left{
        line-height: 80px;
        float:left;
        width:35%;
    }
    .topayOrder_time_right{
        width:65%;
        float: left;
        line-height:80px;
    }
    .topayOrder_pay{
        height:100px;
        border-bottom: 1px solid #eee;
    }
    .topayOrder_pay_left{
        line-height: 80px;
        float:left;
        width:35%;
    }
    .topayOrder_pay_right{
        width:65%;
        float: left;
        line-height:80px;
    }
    .topayOrder_button{
        margin-top:10px;
    }
</style>